<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            width: 100%;
            height: 100px;
            background: lightblue;
        }

        nav {
            width: 100%;
            height: 80px;
            line-height: 80px;
        }

        nav ul {
            width: 60%;
            margin: auto;
            background: lightgoldenrodyellow;
            display: flex;
            justify-content: space-around;

        }

        aside {
            width: 50px;
            height: 200px;
            background: lightgreen;
            position: fixed;
            bottom: 50%;
            right: 10px;
        }

        footer {
            width: 100%;
            height: 80px;
            background: pink;
        }
    </style>
</head>

<body>
    <!-- 语义化标签,作用 ：将标签的作用标识清楚，有利于seo优化 -->
    <header>我是头部</header>
    <nav>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </nav>
    <article>

        历史是最好的老师。<mark>习近平总书记</mark> 始终十分重视党史学习教育，他曾用16个字高度概括党史学习教育的工作要求，即“学史明理、学史增信、学史崇德、学史力行”。

        那么，该如何做到学史明理、学史增信、学史崇德、学史力行？央视网《联播+》特梳理总书记重要论述，与您一同学习领悟。
    </article>
    <section>
        <progress max="100" value="76">
            <span>76</span>%
        </progress>

        <hgroup>
            <h1>前端课堂</h1>
            <h2>带您走向人生巅峰，出任CEO，迎接白富美</h2>
        </hgroup>
        <!-- datalist  给input 添加了类似 下拉菜单的效果 -->
        <input type="text" list="valList" />
        <datalist id="valList">
            <option value="javascript">javascript</option>
            <option value="html">html</option>
            <option value="css">css</option>
        </datalist>

        <details>
            <summary>前端课堂</summary>
            <p>带您走向人生巅峰，出任CEO，迎娶白富美！</p>
        </details>
        用于定义文章或页面作者的详细联系信息<address>天津</address>
        区域
        <ul>
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
            <li>07</li>
            <li>08</li>
        </ul>
    </section>

    <aside>侧边栏</aside>
    <footer>尾部</footer>
</body>

</html>